<script setup>
	import {
		ref
	} from 'vue'
	import {
		getCaptchaImageApi
	} from '@/apis/common.js'
	import {
		loginApi,
		registerApi
	} from '@/apis/user.js'
	import {
		route
	} from 'uview-plus'
	const uToastRef = ref(null)
	const rightClick = () => {
		console.log(11);
	}

	const leftClick = () => {
		route({
			url: '/pages/home/index',
			type: 'tab'
		})
	}

	const isLogin = ref(true)
	const defaultFormData = {
		username: '13700002703',
		password: '123456',
		captcha: '',
		uuid: '',
		okPassword: ''
	}
	const formRef = ref(null)
	const formData = ref({
		username: '13700002703',
		password: '123456',
		captcha: '',
		uuid: '',
		okPassword: ''
	})
	const formRules = {
		username: [{
				type: 'string',
				required: true,
				message: '请输入手机号码',
				trigger: 'blur'
			},
			{
				type: 'string',
				pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
				message: '请输入确定的手机号码',
				trigger: 'blur'
			}
		],
		password: [{
				type: 'string',
				required: true,
				message: '请输入密码',
				trigger: 'blur'
			},
			{
				type: 'string',
				pattern: /^\w{6,20}$/,
				message: '密码长度为6-20位',
				trigger: 'blur'
			}
		],
		captcha: [{
				type: 'string',
				required: true,
				message: '请输入验证码',
				trigger: 'blur'
			},
			{
				type: 'string',
				len: 4,
				message: '验证码必须为4字符',
				trigger: 'blur'
			}
		],
		okPassword: [{
				type: 'string',
				required: true,
				message: '请再次输入密码',
				trigger: 'blur'
			},
			{
				type: 'string',
				pattern: /^\w{6,20}$/,
				message: '密码长度为6-20位',
				trigger: 'blur'
			},
			{
				type: 'string',
				validator: (rule, value, callback) => {
					return formData.value.password === formData.value.okPassword
				},
				message: '两次输入的密码不一致',
				trigger: 'blur'
			}
		]
	}

	const base64Img = ref('')
	// 获取验证码
	const getCaptchaImage = async () => {
		const res = await getCaptchaImageApi()
		formData.value.uuid = res.data.data.uuid
		base64Img.value = 'data:image/png;base64,' + res.data.data.captchaImage
		if (formRef.value) {
			formRef.value.clearValidate(['captcha'])
		}
	}
	getCaptchaImage()

	// 切换的登录或者注册
	const onToggle = () => {
		isLogin.value = !isLogin.value
		if (isLogin.value) {
			getCaptchaImage()
		}
		if (formRef.value) {
			formRef.value.resetFields()
			formRef.value.clearValidate()
		}
		console.log(isLogin.value);

	}

	// 提交登录或者注册
	const onsubmit = async () => {
		try {
			await formRef.value.validate()
		} catch (e) {
			return
		}
		if (isLogin.value) {
			// 登录
			try {
				const res = await loginApi({
					username: formData.value.username,
					password: formData.value.password,
					uuid: formData.value.uuid,
					captcha: formData.value.captcha
				})
				// 登录成功存储 token
				uni.setStorage({
					key: 'token',
					data: res.data.data,
				})


				uToastRef.value.show({
					message: '登录成功',
					type: 'success',
					complete: () => {
						route({
							url: '/pages/home/index',
							type: 'tab'
						})
					}
				})



			} catch (e) {
				console.log(e);
			} finally {
				formData.value = {
					...defaultFormData
				}
				getCaptchaImage()
			}




		} else {
			// 注册
			await registerApi({
				username: formData.value.username,
				password: formData.value.password
			})
			formData.value = {
				...defaultFormData
			}
			
			uToastRef.value.show({
				message: '注册成功',
				type: 'success',
				complete: () => {
					 isLogin.value = true
				}
			})
		 
		}

	}
</script>

<template>
	<view class="page">
		<up-toast ref="uToastRef"></up-toast>
		<!-- 2.0.19支持autoBack，默认为false -->
		<view class="nav">
			<up-navbar :title="isLogin ? '登录' : '注册'" @leftClick="leftClick" @rightClick="rightClick" :autoBack="true">
			</up-navbar>
		</view>
		<view class="content-box">
			<view class="logo-box">
				<up-image src="/static/images/newbee-mall-vue3-app-logo.png" width="8rem" height="8rem"></up-image>
			</view>
			<view class="form-box">
				<up-form :model="formData" :rules="formRules" ref="formRef" :labelWidth="70">
					<up-form-item label="账号" prop="username">
						<up-input border="bottom" placeholder="输入账号" v-model="formData.username"></up-input>
					</up-form-item>
					<up-form-item label="密码" prop="password">
						<up-input border="bottom" placeholder="输入密码" v-model="formData.password"></up-input>
					</up-form-item>

					<up-form-item v-if="isLogin" label="验证码" class="captcha" prop="captcha">
						<up-input border="bottom" class="input" placeholder="输入验证码" v-model="formData.captcha">
						</up-input>
						<span><up-image :src="base64Img" class="image" width="5rem" height="2rem"
								@click="getCaptchaImage"></up-image></span>
					</up-form-item>

					<up-form-item v-else label="确定密码" prop="okPassword">
						<up-input border="bottom" placeholder="输入确定密码" v-model="formData.okPassword">
						</up-input>
					</up-form-item>
				</up-form>

			</view>

			<view class="bottom-box">
				<up-text style="margin-bottom: 1rem; width: 200rpx;" type="primary" :text="isLogin ? '立即注册' : '已有账号'"
					@click="onToggle"></up-text>
				<up-button @click="onsubmit" type="primary" shape="circle" color="#52ABAD"
					:text="isLogin ? '登录' : '注册'"></up-button>
			</view>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	.page {

		.content-box {
			padding: 4rem 2rem 0;
			height: 100%;

			.logo-box {
				display: flex;
				justify-content: center;
				margin-bottom: 20rpx;
			}
		}

		.captcha {
			display: flex;

			.input {
				flex: 1;
				// border-bottom: 1px solid #000;
				margin-right: 10rpx;
			}
		}

	}
</style>